<template>
    <div class="result_wrapper"> 
       <div class="result">
           <div class="imglist">
               <transition-group
                    name="bounce"
                    >
               <img src="http://file.rzkeji.com/web/f6_activity/result/result5.jpg" alt="" :key="1" v-show="img1"> 
               <img src="http://file.rzkeji.com/web/f6_activity/result/result1.jpg" alt="" :key="2" v-show="img2">
               <img src="http://file.rzkeji.com/web/f6_activity/result/result2.jpg" alt="" :key="3" v-show="img3">
               <img src="http://file.rzkeji.com/web/f6_activity/result/result3.jpg" alt="" :key="4" v-show="img4">
               <img src="http://file.rzkeji.com/web/f6_activity/result/result4.jpg" alt="" :key="5" v-show="img5">
               </transition-group>   
           </div>
           <div class="btn">
                <router-link :to="{name:'advert'}" tag="div" replace>
                    <div>点击</div>
                    <div>改善</div>
                </router-link>
                <!-- <div>打卡签到</div> -->
            </div>
       </div>
    </div>
</template>
<script>

export default {
    name:'result',
    data() {
        return {
            imgNum:0,
            img1:false,
            img2:false,
            img3:false,
            img4:false,
            img5:false
        }
    },
    mounted() {
       const showImg= setInterval(()=>{
            if(this.imgNum<5){
                this.imgNum++;
                const n=this.imgNum
                const str=`img${n}`
                this[str]=true
            }
            else{
                clearInterval(showImg)
            }
        },500)
    },
}
</script>
<style lang="scss" scoped>
@import '../../common/css/index.scss';
    .result_wrapper{
        width:100%;
        height: 100%;
        background:url('http://file.rzkeji.com/web/f6_activity/bg1.jpg');
        background-size: 100%;
    }
    .imglist{
        padding:20px 20px 0;
        display: flex;
        flex-wrap: wrap;
        // align-content:space-between;
        justify-content: space-between;
        img{
            width: 320px;
            height: 320px;
            margin:10px;
        }
        img:nth-child(1){
            width: calc(100% - 20px);
            height: 280px;
        }
    }
    .result{
        width:100%;
        height: 100%;
        .btn{
           &>div{
               width: 180px;
                height: 180px;
               background:url('../../../static/img/result/result_btn.png');
                background-size:100% 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                flex-wrap: wrap;
                div{
                    width: 100%;
                }
           }
        }
    }
</style>